<template>
  <div class="container data-container">
    <div class="head">
      <!-- <hospital-selection @selectHospital="selectHospital" :hospital_id="hospital_id"></hospital-selection> -->
      <div class="row">
        <label for>选择医院</label>
        <cube-select
          v-model="hospital_id"
          :options="hospitalList"
          placeholder
          @change="checkproject"
        ></cube-select>
        <Icon type="ios-arrow-right" class="select-icon"></Icon>
      </div>

      <date-selection @selectDate="selectDate" style="margin-top:15px"></date-selection>
    </div>
    <!-- 可下拉框 -->
    <ul class="ul_pt">
      <li class="li_pt" @click="todetail(item)" v-for="(item,index) in list" :key="index">
        <!-- <router-link :to="'/ptDetail:'+item.orderId+'&hos_id='+hospital_id"> -->
        <div class="tip">
          {{item.orderId}}
          <span class="tip_right">{{item.orderStatusValue}}</span>
        </div>
        <div class="main">
          <img :src=" baseUrl+item.groupMasterPicture" alt class="left" />
          <div class="right">
            <p class="name">{{item.groupProjectName}}</p>
            <p class="hospital">{{item.hospitalName}}</p>
            <p class="user">{{item.userName}}</p>
            <p class="date">{{item.appointmentDate}}</p>
          </div>
        </div>
        <!-- </router-link> -->
      </li>
    </ul>

    <!-- </cube-scroll> -->
  </div>
</template>

<script>
import Cube from "cube-ui";
import { Toast } from "mint-ui";
import dateSelection from "@/components/date/dateSelection";
import hospitalSelection from "@/components/hospital/hospitalSelection";
import  api from '../../assets/js/apiPt'

export default {
  data() {
    return {
      baseUrl: "http://mmkappnew.oss-cn-beijing.aliyuncs.com/",
      //医院id
      hospital_id: "",
      hospitalList: [],
      //默认是筛选今天
      curDate: new Date().Format("yyyy-MM-dd"),
      list: [],
      arr: [],
      pageNum: 1,
      pageSize: 10,
      isbottom: true,
      i: 0
    };
  },
  methods: {
    todetail(item) {
      if (item.orderStatusValue == "预约中") {
        this.$router.push({
          path: "/ptDetail:" + item.orderId,
          query: { hos_id: this.hospital_id }
        });
      } else {
        return false;
      }
    },

    getData() {
      this.axios.defaults.baseURL = api;
      if (this.hospital_id == "" || this.hospital_id == null) {
        console.log(this.hospital_id);
        Toast({
          message: "请选择医院查看数据",
          position: "bottom",
          duration: 2000
        });
        return false;
      }

      let dataLoading = this.loading("加载中", 10000);
      this.arr = [];
      this.arr.push(this.hospital_id);
      this.axios
        .post(
          "api/com.mmk.groupservice.api.AdminGroupOrderProvider/1.0.0/findStewardGroupOrderListButler.html",
          {
            hospitalIds: this.arr,
            appointmentDate: this.curDate,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        )
        .then(response => {
          dataLoading.hide();
          let res = response.data;
          console.log(res);
          if (res.code == 0) {
            if (res.data.list.length > 0 && this.pageNum == 1) {
              this.list = res.data.list;
               this.isbottom = false;
            } else if (res.data.list.length > 0 && this.pageNum > 1) {
              this.list = this.list.concat(res.data.list)
              // console.log(this.list)
              this.isbottom = false;
            } else {
              this.isbottom = true;
              // console.log(this.isbottom);
            }

            this.list.forEach(element => {
              element.appointmentDate = new Date(
                element.appointmentDate
              ).Format("yyyy-MM-dd");
            });
          }
        })
        .catch(error => {
          dataLoading.hide();
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });
    },
    //子组件传递过来的时间筛选
    selectDate(date) {
      this.curDate = date;
      this.pageNum = 1;
      this.list = []
      this.getData();
      // console.log(date);
    },
    //子组件传递过来的医院筛选
    checkproject(hospital_id) {
      // console.log(hospital_id);
      this.pageNum = 1;
      this.list = [];
      this.hospital_id = hospital_id;
      this.getData();
    },
    //读取医院列表
    getHospitalList() {
      this.axios
        .post(
          "/api/com.mmk.groupservice.api.AdminGroupOrderProvider/1.0.0/listButlerHospitalInfoButler.html"
        )
        .then(res => {
          // console.log(res);
          this.hospital_id = "";
          if (res.data.data) {
            this.hospitalList = res.data.data.list;
            // console.log(this.hospitalList);
            this.hospitalList.forEach(element => {
              element.text = element.hospitalName;
              element.value = element.id;
            });
          }
        });
    },
    scrollEvent: function() {
      // console.log(111)
      // scrollTop 滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // windowHeight 可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // scrollHeight 滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        // 加载数据
        if (this.isbottom) {
          return false;
        }
        this.pageNum++;
        console.log(this.pageNum)
        this.getData();
      }
    }
  },
  components: {
    dateSelection,
    hospitalSelection
  },
  created() {
    this.axios.defaults.baseURL = api
    // this.axios.defaults.baseURL = "https://adminmping.yuepinyuemei.com";
    this.getHospitalList();
    // this.getData()
  },
  activated(){
    this.getData()
  },
  mounted() {
    window.addEventListener("scroll", this.scrollEvent, true); //监听页面滚动
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollEvent); //离开页面清除（移除）页面滚动事件
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(204, 204, 204, 0.1);
  .head {
    margin-bottom: 16px;
    .row {
      height: 44px;
      background: #fff;
      line-height: 44px;
      position: relative;
      display: flex;
      color: #f64665;
      font-size: 14px;
      padding: 0 16px;
      box-sizing: border-box;
      .select-icon {
        position: absolute;
        right: 16px;
        top: 12px;
      }
    }
  }
}
.cube-textarea::placeholder {
  color: #fff !important;
}
.cube-select::after {
  border: 0 !important;
}
.cube-select {
  text-align: center;
  width: 71% !important;
  line-height: 1.9 !important;
  color: #f64665;
}
.cube-picker-confirm {
  color: #999;
}
.cube-select-tex {
  font-size: 14px;
  color: #f64665;
}

.data-container {
  // margin-bottom: 200px;
  overflow-y: scroll;
}
.list {
  width: 92%;
  margin: 0px 4% 20px;
  padding-bottom: 80px;
  position: relative;
}
.cube-scroll-list-wrapper {
  overflow: scroll;
}
// 列表样式
.ul_pt {
  width: 100%;
  box-sizing: border-box;
  // margin-top: 10px;
  background: rgba(204, 204, 204, 0.1);
  // overflow: scroll;
  // padding-bottom: 0px;
  .li_pt {
    font-size: 14px;
    color: #666;
    background: #fff;
    padding-left: 15px;
    .tip {
      height: 50px;
      line-height: 50px;
      padding-right: 15px;
      border-bottom: 1px solid #ccc;
      .tip_right {
        font-weight: 600;
        float: right;
      }
    }
    .main {
      height: 150px;
      display: flex;
      padding: 15px 0;
      .left {
        width: 120px;
        height: 120px;
        display: block;
        // background: khaki;
        margin-right: 15px;
      }
      .right {
        color: #666;
        font-size: 14px;
        position: relative;
        .name {
          font-size: 17px;
          color: #666;
          font-weight: 600;
        }
        .user {
          margin-top: 30px;
        }
      }
    }
  }
}
.cube-scroll-wrapper {
  position: relative;
  height: 100%;
  overflow: scroll;
}
.list-wrap {
  // height: 350px;
}
</style>

